<template>
  <v-dialog ref="dialog" v-model="dialogStatus" :return-value.sync="dateText"
            persistent full-width width="290px">

    <template v-slot:activator="{ on }">
      <v-text-field
        v-model="dateText"
        :label="label"
        append-icon="mdi-calendar-range"
        readonly
        outlined
        :rules="rules"
        v-on="on"
      ></v-text-field>
    </template>

    <v-date-picker @change="dateChangeHandle" v-model="dateText" :show-current="false" show-current="false" scrollable>
      <v-spacer></v-spacer>
      <v-btn text color="primary" @click="dialogStatus = false">取消</v-btn>
      <v-btn text color="primary" @click="$refs.dialog.save(dateText)">确定</v-btn>
    </v-date-picker>

  </v-dialog>
</template>

<script>
    import moment from 'moment';

    /**
     * 日期选择器 【yyyy-mm-dd】
     * @author Canaan
     * @date 2019/8/13 17:18.
     */
    export default {
        name: 'DatePicker',
        mounted() {

        },
        components: {},
        props: {
            label: {
                default: '请选择',
                type: String
            },
            value: {
                default: (new Date()).getTime(),  //13 位时间戳
            },
            rules: null
        },
        data() {
            return {
                currentVal: this.value,
                dialogStatus: false,
                dateText: this.dateFormatter(this.value)
            }
        },
        computed: {},
        methods: {
            dateFormatter(val) {
                if (val) {
                    return moment(val).format("YYYY-MM-DD");
                }
                return "";
            },
            dateChangeHandle(val) {
                if (val) {
                    this.currentVal = moment(val).valueOf();
                    this.$emit('input', this.currentVal);
                } else {
                    this.currentVal = null;
                    this.$emit('input', this.currentVal);
                }
            }
        },
        watch: {
            value(val) {
                this.currentVal = val;
                this.dateText = this.dateFormatter(val);
            }
        },
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>
